<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="copyright" content="Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
 
 Licensed under the Apache License, Version 2.0 (the “License”);
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
 http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an “AS IS” BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.">
        <title>Snap</title>
        <script src="../../dist/snap.svg-min.js"></script>
        <link rel="stylesheet" href="style.css">
        <script>
        window.onload = function () {

            var logo = Snap.select("#snap-logo"),
                parts = [
                    ["top", [0, 20]], 
                    ["left", [20, 0]], 
                    ["bottom", [0, -20]],
                    ["right", [-20, 0]]
                ],
                i = 0,
                showTimer = null,
                hideTimer = null;

            for (i = 0; i < parts.length; i++) {
                var el = parts[i],
                element = logo.select("#" + el[0]);
                element.attr({
                    opacity: 0,
                    transform: "t" + el[1]
                });
                parts[i].push(element);
            }

            i = 0;

            function showEach() {
                clearTimeout(hideTimer);
                if (i >= parts.length) return;
                parts[i][2].animate({ 
                    transform: "t0,0",
                    opacity: 1
                }, 200, mina.easeout);
                showTimer = setTimeout(showEach, 200);
                i++;
                if (i >= parts.length) i = parts.length-1;
            }

            function hideEach() {
                clearTimeout(showTimer);
                if (i < 0) return;
                parts[i][2].animate({ 
                    transform: "t" + parts[i][1],
                    opacity: 0
                }, 200, mina.easeout);
                hideTimer = setTimeout(hideEach, 200);
                i--;
                if (i < 0) i = 0;
            }

            setTimeout(function () {
                logo.attr({
                    display: "inline"
                });
                showEach();
            }, 100);

            logo.hover(hideEach, showEach);

        };
        </script>
    </head>
    <body>



        <svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="250px" height="250px">
            <defs>
                <linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse" 
                    x1="196" y1="485.6281" x2="196" y2="732.5812" 
                    gradientTransform="matrix(1 0 0 1 -71 -486.5)">
                    <stop  offset="0" stop-color="#002E3B"/>
                    <stop  offset="1" stop-color="#002639"/>
                </linearGradient>
                <radialGradient id="right_2_" cx="146.3819" cy="449.8799" 
                    r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)" 
                    gradientUnits="userSpaceOnUse">
                    <stop  offset="0" stop-color="#00BC85"/>
                    <stop  offset="1" stop-color="#149D91"/>
                </radialGradient>
                <radialGradient id="left_1_" cx="139.0562" cy="454.2622" 
                    r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)" 
                    gradientUnits="userSpaceOnUse">
                    <stop  offset="0" stop-color="#004473"/>
                    <stop  offset="1" stop-color="#00345F"/>
                </radialGradient>
                <linearGradient id="top_1_" gradientUnits="userSpaceOnUse" 
                    x1="195.922" y1="486.8864" x2="195.922" y2="732.5903" 
                    gradientTransform="matrix(1 0 0 1 -71 -486.5)">
                    <stop  offset="0" stop-color="#002E3B"/>
                    <stop  offset="1" stop-color="#002639"/>
                </linearGradient>
                </defs>
            <polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)" 
            points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24 
            51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
            <polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)" 
            points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758 
            165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
            <polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)" 
            points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96 
            51.096,38.088 51.096,138.597 "/>
            <polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)" 
            points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892 
            198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
        </svg>


    </body>
</html>